<template>
  <div class="set-userinfo">
    <van-cell title="头像" center is-link>
      <van-uploader max-count="1" :after-read="afterRead">
        <img class="avator" :src="basicInfo.headImgUrl" alt="" />
      </van-uploader>
    </van-cell>
    <van-field class="mb20" placeholder="请输入姓名" input-align="right" label="姓名" v-model="basicInfo.nickname"></van-field>
    <van-cell title="手机号" center is-link to="/modifyPhone" :value="basicInfo.phone" />
    <van-field placeholder="请输入地址" input-align="right" type="textarea" rows="3" label="地址" v-model="basicInfo.address"></van-field>
    <van-field class="mb20" placeholder="请输入公司名称" input-align="right" label="公司" v-model="basicInfo.company"></van-field>
    <van-cell title="职位" is-link @click="showDutyPicker = true" :value="basicInfo.identityType ? mapIdentity(basicInfo.identityType) : '请选择职位'" />
    <van-button block color="#FE9200" class="submit-btn" @click="submit">保存</van-button>
    <van-popup v-model="showDutyPicker" round position="bottom">
      <van-picker show-toolbar :columns="dutyList" @cancel="showDutyPicker = false" @confirm="confirmDuty" />
    </van-popup>
  </div>
</template>

<script>
import { Cell, Button, Field, Popup, Picker, Uploader, Toast } from 'vant';
import { mapGetters } from 'vuex';
import { user_updateUser } from '@api/user';
export default {
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [Popup.name]: Popup,
    [Picker.name]: Picker
  },
  data() {
    return {
      basicInfo: {},
      showDutyPicker: false
    };
  },
  computed: {
    ...mapGetters(['dutyList'])
  },
  mounted() {
    this.getOSSConfig();
    this.basicInfo = Object.assign({}, this.userInfo);
  },
  methods: {
    afterRead(file) {
      let OSS = require('ali-oss');
      let client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: this.OSSConfig.accessKeyId,
        accessKeySecret: this.OSSConfig.accessKeySecret,
        stsToken: this.OSSConfig.securityToken,
        bucket: this.OSSConfig.bucket
      });
      this.$loading.show();
      client
        .put(`userheadimg/userid_${this.userInfo.id}/${Date.now()}.png`, file.file)
        .then(res => {
          this.$loading.hide();
          this.basicInfo.headImgUrl = res.url;
        })
        .catch(err => {});
    },
    mapIdentity(id) {
      return this.$store.state.dutyList.find(item => {
        return item.type === id;
      }).text;
    },
    confirmDuty(val) {
      this.basicInfo.identityType = val.type;
      this.basicInfo.identityText = val.text;
      this.showDutyPicker = false;
    },
    async submit() {
      const { nickname, headImgUrl, address, company, identityType } = this.basicInfo;
      console.log(this.basicInfo, 111);
      if (!headImgUrl) {
        return Toast('请先上传头像');
      } else if (!nickname) {
        return Toast('请先填写姓名');
      } else if (!address) {
        return Toast('请先填写地址');
      } else if (!company) {
        return Toast('请先填写公司');
      } else if (!identityType) {
        return Toast('请先选择职位');
      }
      let res = await user_updateUser({ nickname, headImgUrl, address, company, identityType });
      if (res.code === 200) {
        Toast('修改成功');
        this.$store.commit('setUserInfo', Object.assign(this.userInfo, { nickname, headImgUrl, address, company, identityType }));
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.avator {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
/deep/ .van-field {
  input,
  textarea {
    color: #969799;
  }
}
.mb20 {
  margin-bottom: 20px;
  &:after {
    border-bottom: none;
  }
}
.submit-btn {
  margin: 150px auto;
  width: calc(100% - 64px);
  box-shadow: 1px 5px 15px 0px rgba(254, 146, 0, 0.25);
  border-radius: 6px;
  font-size: 30px;
  font-weight: bold;
}
/deep/ .van-uploader__input-wrapper {
  height: 80px;
}
</style>
